<template>
  <div class="save">
    <!-- 表头 -->
    <mheader></mheader>
    <el-steps :active="1" style="padding: 48px 5px;" process-status="finish" align-center>
      <el-step title="第一步：录入信息"></el-step>
      <el-step title="第二步：预览检查"></el-step>
      <el-step title="第三步：提交确认"></el-step>
    </el-steps>
    <div class="wrap">
      <el-row>
        <el-col :span="24">
          <div><span>申请工单号：</span>{{ Mdata.stuEnrollInfo.id }}</div>
        </el-col>
      </el-row>
      <div class="gridTitle">申请志愿：</div>
      <el-row>
        <el-col v-if="Mdata.stuEnrollInfo.projectId !== 7" :span="24">
          <div><span>意向班型：</span>{{ Mdata.stuEnrollInfo.className }}</div>
        </el-col>
        <el-col v-if="Mdata.stuEnrollInfo.projectId === 7" :span="24">
          <div style="display: flex;justify-content: flex-start; align-items: flex-start;">
            <span style="width: 75px;">
            意向志愿：</span>
            <span style="width: 940px;">{{ Mdata.stuEnrollInfo.projectName }}&nbsp;{{ Mdata.stuEnrollInfo.schoolName }}&nbsp;{{ Mdata.stuEnrollInfo.degreeName }}&nbsp;{{ Mdata.stuEnrollInfo.className }}，{{ Mdata.stuEnrollInfo.classIdTwoName }}，{{ Mdata.stuEnrollInfo.classIdThreeName }}</span>
          </div>
        </el-col>
        <el-col v-if="Mdata.stuEnrollInfo.projectId === 7" :span="24">
          <div><span>自主志愿：</span>{{ Mdata.stuEnrollInfo.wishMsg || '-' }}</div>
        </el-col>
        <el-col :span="24">
          <div><span>备注：</span>{{ Mdata.stuEnrollInfo.note ? Mdata.stuEnrollInfo.note : '-' }}</div>
        </el-col>
        <el-col v-if="Mdata.stuEnrollInfo.projectId === 7" :span="20" style="margin-top: 8px"><img width='900px' src="https://xszx-test-1251987637.cos.ap-beijing.myqcloud.com/mba1/img/mba2.5.1.png" alt=""></el-col>
        <el-col v-if="Mdata.stuEnrollInfo.projectId === 7" :span="20" style="margin: 8px;color:red">*注意：经审查发现奖学金申报、入学申请等证明信息与本人实际情况不符者将直接拒绝其入学申请。</el-col>
      </el-row>
      <div class="gridTitle">学员信息：</div>
      <el-row>
        <el-col :span="8">
          <div><span>姓名：</span>{{ Mdata.stuEnrollInfo.name }}</div>
        </el-col>
        <el-col :span="16">
          <div><span>性别：</span>{{ Mdata.stuEnrollInfo.sex === 1 ? '女' : '男' }}</div>
        </el-col>
        <el-col :span="8">
          <div><span>年龄：</span>{{ Mdata.stuEnrollInfo.age }}</div>
        </el-col>
        <el-col :span="8">
          <div><span>手机号：</span>{{ Mdata.stuEnrollInfo.mobile }}</div>
        </el-col>
      </el-row>
      <div class="gridTitle">咨询师信息：</div>
      <el-row>
        <el-col :span="24">
          <div><span>姓名：</span>{{ Mdata.stuEnrollInfo.refereeName }}</div>
        </el-col>
        <el-col :span="8">
          <div><span>事业部：</span>{{ Mdata.stuEnrollInfo.refereeDepartmentName }}</div>
        </el-col>
        <el-col :span="8">
          <div><span>邮箱：</span>{{ Mdata.stuEnrollInfo.refereeEmail }}@sunlands.com</div>
        </el-col>
        <el-col :span="8">
          <div><span>手机号：</span>{{ Mdata.stuEnrollInfo.refereeTel }}</div>
        </el-col>
      </el-row>
      <div v-if="Mdata.stuEnrollInfo.isEom">
        <div v-if="Mdata.eduExperienceList[0]">
          <div class="gridTitle">教育信息：</div>
          <el-row>
            <div v-for="(item, index) in Mdata.eduExperienceList" :key="index">
              <el-col :span="24">
                <div class="nav"><span>学历{{ index + 1 }}：</span></div>
              </el-col>
              <el-col :span="24">
                <div><span>学校名称：</span>{{item.schoolName === '' ? '-' : item.schoolName}}</div>
              </el-col>
              <el-col :span="24">
                <div><span>专业名称：</span>{{item.professionName === '' ? '-' : item.professionName}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>学历：</span>{{item.level === '' ? '-' : level[item.level]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>院校类型：</span>{{item.schoolType === '' ? '-' : schoolType[item.schoolType]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>学习形式：</span>{{item.learnModal === '' ? '-' : learnType[item.learnModal]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>学习年限：</span>{{item.eduYear === '' ? '-' : eduYear[item.eduYear]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>是否全日制：</span>{{item.isFullTime === '' ? '-' : flag[item.isFullTime]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>科目数量：</span>{{item.subjectNumOfGrades === '' ? '-' : subjectNumOfGrades[item.subjectNumOfGrades]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>成绩平均分：</span>{{ item.averageGrades === '' ? '-' : item.averageGrades }}</div>
              </el-col>
              <el-col :span="8">
                <div><span>获得学位证：</span>{{item.isEducationCert === '' ? '-' : xueweizheng[item.isEducationCert]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>学信网是否可查：</span>{{item.isCheck === '' ? '-' : flag[item.isCheck]}}</div>
              </el-col>
            </div>
          </el-row>
        </div>
        <div v-if="Mdata.workExperienceList[0]">
          <div class="gridTitle">工作信息：</div>
          <el-row>
            <el-col :span="24 ">
              <div class="nav"><span>工作总述：</span></div>
            </el-col>
            <el-col :span="24 ">
              <div><span>总工作年限：</span>{{Mdata.stuEnrollInfo.workYear === '' ? '-' : Mdata.stuEnrollInfo.workYear}}</div>
            </el-col>
            <div v-for="(item, index) in Mdata.workExperienceList" :key="index">
              <el-col :span="24">
                <div class="mar_top bold"><span>{{ index === 0 ? '至今最近的一份工作：' : '第' + (index + 1) + '份工作经历' }}</span></div>
              </el-col>
              <el-col :span="24">
                <div><span>公司名称：</span>{{item.companyName === '' ? '-' : item.companyName}}</div>
              </el-col>
              <el-col :span="24">
                <div><span>涉及领域：</span>{{item.workDirection === '' ? '-' : item.workDirection}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>是否在职：</span>{{item.isOnJob === '' ? '-' : jobFlag[item.isOnJob]}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>在职时间：</span>{{item.onJobDateFrom === '' ? '-' : item.onJobDateFrom}} - {{item.onJobDateTo === '' ? '-' : item.onJobDateTo}}</div>
              </el-col>
              <el-col :span="8">
                <div>&nbsp;</div>
              </el-col>
              <el-col :span="8">
                <div><span>职位：</span>{{item.job === '' ? '-' : item.job}}</div>
              </el-col>
              <el-col :span="8">
                <div><span>年薪范围：</span>{{item.salary === '' ? '-' : salary[item.salary]}}</div>
              </el-col>
              <el-col :span="8">
                <div>&nbsp;</div>
              </el-col>
            </div>
          </el-row>
        </div>
        <div class="gridTitle">英语能力：</div>
        <el-row>
          <el-col :span="8">
            <div><span>英语等级：</span>{{Mdata.englishExperience.level === '' ? '-' : englishLevel[Mdata.englishExperience.level]}}</div>
          </el-col>
          <el-col :span="8">
            <div><span>词汇量：</span>{{Mdata.englishExperience.words === '' ? '-' : words[Mdata.englishExperience.words]}}</div>
          </el-col>
          <el-col :span="8">
            <div><span>口语能力：</span>{{Mdata.englishExperience.speakLevel === '' ? '-' : writeLevel[Mdata.englishExperience.speakLevel]}}</div>
          </el-col>
          <el-col :span="8">
            <div><span>听力能力：</span>{{Mdata.englishExperience.hearLevel === '' ? '-' : writeLevel[Mdata.englishExperience.hearLevel]}}</div>
          </el-col>
          <el-col :span="8">
            <div><span>阅读能力：</span>{{Mdata.englishExperience.readLevel === '' ? '-' : writeLevel[Mdata.englishExperience.readLevel]}}</div>
          </el-col>
          <el-col :span="8">
            <div><span>写作能力：</span>{{Mdata.englishExperience.writeLevel === '' ? '-' : writeLevel[Mdata.englishExperience.writeLevel]}}</div>
          </el-col>
        </el-row>
        <div class="gridTitle">附件材料：</div>
        <el-row>
          <div v-for="(item, index) in Mdata.eduExperienceList" :key="index">
            <div v-if="item.graduateCertPic.length">
              <el-col :span="24">
                <div><span>学历{{ index + 1 }}毕业证：</span></div>
              </el-col>
              <el-col :span="24">
                <div class="addStuff"><img v-for="(item2, index) in item.graduateCertPic" :src="item2 | imageOrPdf" :key="index" alt="" @click="difference(item2)"></div>
              </el-col>
            </div>
            <div v-if="item.eduCertPic.length">
              <el-col :span="24">
                <div><span>学历{{ index + 1 }}学位证：</span></div>
              </el-col>
              <el-col :span="24">
                <div class="addStuff"><img v-for="(item2, index) in item.eduCertPic" :src="item2 | imageOrPdf" :key="index" alt="" @click="difference(item2)"></div>
              </el-col>
            </div>
            <div v-if="item.gradeFormPic.length">
              <el-col :span="24">
                <div><span>学历{{ index + 1 }}成绩单：</span></div>
              </el-col>
              <el-col :span="24">
                <div class="addStuff"><img v-for="(item2, index) in item.gradeFormPic" :src="item2 | imageOrPdf" :key="index" alt="" @click="difference(item.gradeFormPic)"></div>
              </el-col>
            </div>
          </div>
          <div v-if="Mdata.additionalStuff.applyTable.length">
            <el-col :span="24">
              <div><span>申请表：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.applyTable" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.chsiCnEdu.length">
            <el-col :span="24">
              <div><span>学信网中文学历认证：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.chsiCnEdu" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.chsiEnEdu.length">
            <el-col :span="24">
              <div><span>学信网英文学历认证：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.chsiEnEdu" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.scoreCard.length">
            <el-col :span="24">
              <div><span>最高学历成绩单认证：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.scoreCard" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.pasport.length">
            <el-col :span="24">
              <div><span>护照扫描件：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.pasport" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.idCard.length">
            <el-col :span="24">
              <div><span>身份证正反扫描件：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.idCard" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.identificationPic.length">
            <el-col :span="24">
              <div><span>2寸证件照：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.identificationPic" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.workProve.length">
            <el-col :span="24">
              <div><span>工作证明（盖公章）：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.workProve" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.vitae.length">
            <el-col :span="24">
              <div><span>个人简历：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.vitae" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.degreeIdent.length">
            <el-col :span="24">
              <div><span>专业网专业认证：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.degreeIdent" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.recommendation.length">
            <el-col :span="24">
              <div><span>推荐信：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.recommendation" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.enVideo.length">
            <el-col :span="24">
              <div><span>90秒英文视频：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.enVideo" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
          <div v-if="Mdata.additionalStuff.statement.length">
            <el-col :span="24">
              <div><span>中文或英文个人陈述：</span></div>
            </el-col>
            <el-col :span="24">
              <div class="addStuff"><img v-for="(item, index) in Mdata.additionalStuff.statement" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
            </el-col>
          </div>
        </el-row>
      </div>
      <!-- 提交 -->
      <div class="wrapPadding">
        <div class="time"><i class="el-icon-time"></i> 信息有效期：<b>{{time}}</b></div>
        <div class="wrapPadding">
          <el-button @click="reEdit">修改信息</el-button>
          <el-button type="primary" @click="submit" :disabled=submitDisable>确认上传</el-button>
      </div>
      </div>
      <!-- 图片预览 -->
      <el-dialog :visible.sync="pictureVisible">
        <img :src="pictureVisibleSrc" alt="">
      </el-dialog>
      <!-- 视频播放 -->
      <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" width="80%">
        <video-player
          ref="videoPlayer"
          :playsinline="false"
          :options="videoOption"
          class="vjs-custom-skin"/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getOrderId, save } from '../api/stuEnrollInfo'
import mheader from '@/components/mheader'
export default {
  name: 'stuEnrollInfo',
  data () {
    return {
      pictureVisible: false,
      pictureVisibleSrc: '',
      dialogVisible: false,
      setItems: ['formMsg', 'school', 'major', 'ClassType', 'referee', 'wish'],
      time: '',
      deltaTime: 30 * 60,
      Mdata: {
        stuEnrollInfo: {},
        englishExperience: {},
        eduExperienceList: [], // 教育信息
        workExperienceList: [], // 工作信息
        additionalStuff: {}
      },
      videoOption: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        sources: [{
          type: 'video/mp4',
          src: '' // url地址
        }]
      },
      submitDisable: false,
      project: {
        1: '国际MBA',
        2: 'MBA中国',
        3: 'UCR'
      },
      englishLevel: {
        '1': '零基础',
        '2': '初中水平',
        '3': '高中水平',
        '4': '大学水平无通过任何等级证书',
        '5': '大学英语4级',
        '6': '大学英语6级',
        '7': '英语专业4级',
        '8': '英语专业8级',
        '9': '雅思 6分以上',
        '10': '托福 75分以上'
      },
      schoolType: {// 院校类型
        '1': '二本',
        '2': '一本',
        '3': '211',
        '4': '985',
        '5': '其他'
      },
      subjectNumOfGrades: {
        1: '1-9',
        2: '10-14',
        3: '15-19',
        4: '20以上'
      },
      words: {
        1: '1000以下',
        2: '1000-2000',
        3: '3000-4000',
        4: '4000-6000',
        5: '6000-8000',
        6: '8000以上'
      },
      eduYear: {
        1: '2年',
        2: '2.5年',
        3: '3年',
        4: '4年',
        5: '5年',
        6: '5年以上'
      },
      xueweizheng: {
        1: '无',
        2: '有'
      },
      learnType: {
        '1': '其他',
        '2': '网络教育',
        '3': '成考',
        '4': '自考',
        '5': '统招'
      },
      flag: {
        1: '否',
        2: '是'
      },
      jobFlag: {
        1: '是',
        2: '否'
      },
      sex: {
        1: '女',
        2: '男'
      },
      level: {
        1: '大专',
        2: '高中起点专科',
        3: '专升本',
        4: '本科',
        5: '本科以上'
      },
      salary: {
        1: '5万-10万',
        2: '10万-20万',
        3: '20万-30万',
        4: '30万-50万',
        5: '50万-100万',
        6: '100万以上'
      },
      writeLevel: {
        1: '优秀',
        2: '一般',
        3: '很差',
        4: '无'
      },
      timer: ''
    }
  },
  components: {
    mheader
  },
  filters: {
    imageOrPdf (value) {
      if (!value) return ''
      if (value.includes('pdf')) {
        return 'https://xszx-test-1251987637.cosbj.myqcloud.com/images/pdf.png'
      } else if (value.includes('mp4') || value.includes('avi') || value.includes('mkv')) {
        return 'https://xszx-test-1251987637.cosbj.myqcloud.com/images/1551783178857WechatIMG386.jpeg'
      } else if (value.includes('docx')) {
        return 'https://xszx-test-1251987637.cosbj.myqcloud.com/images/1551851063897timg.jpg'
      }
      return value
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    difference (src) {
      if (src.includes('pdf')) {
        this.openPdf(src)
      } else if (src.includes('mp4') || src.includes('avi') || src.includes('mkv')) {
        this.authVideo(src)
      } else if (src.includes('docx')) {
        this.openDocx(src)
      } else {
        this.prviewPicture(src)
      }
    },
    openPdf (src) {
      window.open(src)
    },
    authVideo (item) {
      this.videoOption.sources[0].src = item
      this.dialogVisible = true
    },
    openDocx (src) {
      window.location.href = src
    },
    prviewPicture (src) {
      this.pictureVisibleSrc = src
      this.pictureVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
          this.player.pause()
          done()
        })
        .catch(_ => {})
    },
    reEdit () {
      this.$router.go(-1)
    },
    initTime () {
      if (this.deltaTime <= 0) {
        this.submitDisable = true
        clearInterval(this.timer)
        return
      }
      this.deltaTime--
      let mm = Math.floor(this.deltaTime / 60)
      let ss = Math.floor(this.deltaTime % 60)
      if (mm < 10) mm = '0' + mm
      if (ss < 10) ss = '0' + ss
      if (this.deltaTime <= 0) { this.time = '00:00:00' }
      this.time = '00:' + mm + ':' + ss
    },
    async submit () {
      let submitData = JSON.parse(JSON.stringify(this.Mdata))
      submitData.eduExperienceList.forEach(element => {
        element.graduateCertPic = element.graduateCertPic.join(',')
        element.eduCertPic = element.eduCertPic.join(',')
        element.gradeFormPic = element.gradeFormPic.join(',')
      })
      Object.entries(submitData.additionalStuff).forEach(element => {
        submitData.additionalStuff[element[0]] = element[1].join(',')
      })
      submitData.stuEnrollInfo.hopeSchool = this.Mdata.stuEnrollInfo.wishMsg
      // const { name, className, degreeName, schoolName, projectName } = this.Mdata.stuEnrollInfo
      // console.log(name, className, degreeName, schoolName, projectName)
      let { data: { code, msg } } = await save(submitData)
      if (code === 500) { // 失败
        this.$confirm('请重新提交数据！', `提交失败：${msg}`, {
          confirmButtonText: '重新填写',
          showCancelButton: false,
          closeOnPressEscape: false,
          type: 'error',
          center: true
        }).then(() => {
          this.setItems.forEach((element) => {
            sessionStorage.removeItem(element)
          })
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      } else {
        // this.$confirm(`工单号${this.Mdata.stuEnrollInfo.id}`, '提交成功', {
        this.$confirm(`<p>工单号${this.Mdata.stuEnrollInfo.id}</p><p style="color:red">该申请还需学员操作风险确认和测评，请学员留意短信！</p>`, '提交成功', {
          confirmButtonText: '继续提交',
          showCancelButton: false,
          closeOnPressEscape: false,
          dangerouslyUseHTMLString: true,
          type: 'success',
          center: true
        }).then(() => {
          this.setItems.forEach((element) => {
            sessionStorage.removeItem(element)
          })
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      }
    }
  },
  async created () {
    this.timer = setInterval(() => {
      this.initTime()
    }, 1000)
    this.Mdata = JSON.parse(sessionStorage.getItem('allInfo'))
    let { data: { orderId } } = await getOrderId()
    Object.assign(this.Mdata.stuEnrollInfo, { id: orderId })
    if (!JSON.parse(sessionStorage.getItem('allInfo'))) {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
  .wrap{
    padding: 0 100px;
    margin: 0 auto;
    .el-row {
      line-height: 40px;
      padding: 5px 48px;
      line-height: 30px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px;
      .nav{
        font-size: 20px;
        font-weight: bold;
      }
      .mar_top{
        margin-top: 20px;
      }
      .bold{
        font-weight: bold;
      }
      .addStuff{
        padding-left: 100px;
        img{
          margin: 0 10px;
          width: 100px;
          height: 100px;
        }
      }
    }
    .el-dialog{
      img{
        display: block;
        margin: 0 auto;
        width: 90%;
      }
    }
    .gridTitle{
      margin-top: 20px;
      font-size: 20px;
      line-height: 40px;
    }
    .time {
      color: #FF2352;
    }
  }
  .wrapPadding {
    padding: 14px 0;
    i {
      float: left;
      font-weight: 900;
    }
    .workDirectionr{
      padding-left: 105px;
      line-height: 20px;
      margin-top: -3px;
    }
  }
</style>
